<template>
  <div class="page">
    <div class="page-register">
      <h3 class="login-title">注册新用户</h3>
      <br />
      <el-form ref="form" :model="formData" :rules="formRules">
        <el-form-item prop="id">
          <el-input
            v-model.trim="formData.id"
            placeholder="账号"
            @keyup.enter.native="handleLogin('form')"
          >
            <i slot="prefix" class="icon iconfont icon-account" />
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input
            v-model="formData.password"
            placeholder="密码"
            @keyup.enter.native="handleLogin('form')"
          >
            <i slot="prefix" class="icon iconfont icon-password" />
          </el-input>
        </el-form-item>

        <el-form-item prop="role" class="expand-size">
          <el-select
            v-model="formData.role"
            placeholder="请选择"
            disabled
            style="width: 330px"
          >
            <el-option
              class="expand-indent"
              v-for="item in Constants.roleOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item class="text-right">
          <el-button
            :loading="loading"
            type="primary"
            @click.prevent="handleSubmit('form')"
          >
            注册
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <Bubble />
  </div>
</template>

<script>
import Bubble from "@/components/BubbleAnimation/Bubble";
import { registerByUser } from "@/api/modules/user";
import { registerNewUser } from "@/mock/login";
import Constants from "@/constants";
export default {
  name: "Login",
  components: {
    Bubble,
  },
  data() {
    const validateUsername = (rule, value, callback) => {
      if (value == "") {
        callback(new Error("账号不能为空"));
      } else {
        callback();
      }
    };
    const validatePassword = (rule, value, callback) => {
      if (value.length < 6) {
        callback(new Error("密码不少于6位"));
      } else {
        callback();
      }
    };
    return {
      // 绑定在表单上的字段取名，固定为formData
      formData: {
        id: "11",
        password: "123456",
        role: 0, // 角色//0 用户 1 专家 2 管理员
      },
      // 绑定在表单上的规则字段取名，固定为formRules
      formRules: {
        username: [
          {
            required: true,
            trigger: "blur",
            validator: validateUsername,
          },
        ],
        password: [
          {
            required: true,
            trigger: "blur",
            validator: validatePassword,
          },
        ],
      },
      roleOptions: [
        {
          value: 0,
          label: "用户",
        },
        {
          value: 1,
          label: "专家",
        },
        {
          value: 2,
          label: "管理员",
        },
      ],
      loading: false,
      showDialog: false,
      redirect: undefined,
    };
  },
  methods: {
    showPwd() {
      if (this.passwordType === "password") {
        this.passwordType = "";
      } else {
        this.passwordType = "password";
      }
    },
    handleSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          registerByUser(this.formData).then((res) => {
            this.loading = false;
            if (res.code == 200) {
              this.$message({
                message: "注册成功",
                type: "success",
              });
              this.$router.replace({
                path: "/login",
              });
            } else {
              this.$message({
                message: res.message,
                type: "error",
              });
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0%;
  width: inherit;
  height: inherit;
  /* background-color: #f2efb6; */
  background-image: url("../../assets/custom_imags/bg.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 1;
}

.page-register {
  width: 360px;
  background-color: #dff8d9;
  padding: 15px;
  border-radius: 10px;
  z-index: 99;
}
.expand-size {
  width: 330px;
  // padding: 0 15px;
}
.expand-indent {
  text-indent: 15px;
}
.text-right {
  text-align: center;
}
</style>
